document.addEventListener('DOMContentLoaded', function() {
    // 配置toastr提示框
    toastr.options = {
        "closeButton": true,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "timeOut": "3000"
    };

    // 获取token
    const token = localStorage.getItem('token');
    if (!token) {
        window.location.href = 'login.html';
        return;
    }

    // API基础URL
    const apiUrl = "http://localhost:9999/user/";

    // 分页参数
    let currentPage = 1;
    const pageSize = 10;
    let totalPages = 0;
    let totalRecords = 0;

    // 搜索参数
    let searchParams = {
        username: '',
        phone: ''
    };

    // 渲染用户列表
    function renderUserList(users) {
        console.log('Rendering users:', users); // 添加日志
        const userList = $('#userList');
        userList.empty();

        if (!users || users.length === 0) {
            userList.append('<tr><td colspan="7" class="text-center">暂无数据</td></tr>');
            return;
        }

        users.forEach(user => {
            console.log('Processing user:', user); // 添加日志
            const statusClass = user.status === 1 ? 'status-active' : 'status-inactive';
            const statusText = user.status === 1 ? '正常' : '禁用';
            const roleText = user.role === 1 ? '管理员' : '普通用户';
            const roleClass = user.role === 1 ? 'role-admin' : 'role-user';
            
            const row = `
                <tr>
                    <td>${user.username || '-'}</td>
                    <td>${user.phone || '-'}</td>
                    <td><span class="role-badge ${roleClass}">${roleText}</span></td>
                    <td><span class="status-badge ${statusClass}">${statusText}</span></td>
                    <td>${formatDate(user.createTime)}</td>
                    <td>
                        <div class="action-buttons">
                            <button class="btn-primary editBtn" data-id="${user.id}">编辑</button>
                            <button class="btn-warning statusBtn" data-id="${user.id}" data-status="${user.status}">
                                ${user.status === 1 ? '禁用' : '启用'}
                            </button>
                            <button class="btn-danger deleteBtn" data-id="${user.id}">删除</button>
                        </div>
                    </td>
                </tr>
            `;
            userList.append(row);
        });
    }

    // 格式化日期
    function formatDate(dateString) {
        if (!dateString) return '-';
        const date = new Date(dateString);
        return date.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
    }

    // 渲染分页
    function renderPagination(total) {
        totalRecords = total;
        totalPages = Math.ceil(total / pageSize);
        $('#pageInfo').text(`第 ${currentPage} 页 / 共 ${totalPages} 页`);
        $('#totalInfo').text(`共 ${total} 条`);
        $('#prevPage').prop('disabled', currentPage <= 1);
        $('#nextPage').prop('disabled', currentPage >= totalPages);
    }

    // 获取用户列表
    function fetchUserList() {
        const params = {
            page: currentPage,
            pageSize: pageSize,
            username: searchParams.username,
            phone: searchParams.phone
        };

        $.ajax({
            url: `${apiUrl}list`,
            method: 'GET',
            headers: {
                'token': token
            },
            data: params,
            success: function(response) {
                console.log('Response:', response); // 添加日志
                if (response.code === 200) {
                    const pageData = response.data;
                    console.log('Page data:', pageData); // 添加日志
                    if (pageData) {
                        renderUserList(pageData.records || []);
                        renderPagination(pageData.total || pageData.records?.length || 0);
                    } else {
                        toastr.error('数据格式错误');
                        console.error('Unexpected data format:', pageData);
                    }
                } else {
                    toastr.error(response.msg || '获取用户列表失败');
                }
            },
            error: function(xhr, status, error) {
                console.error('API Error:', error);
                toastr.error('服务器错误，请稍后重试');
            }
        });
    }

    // 表单验证
    function validateForm(data) {
        const errors = {};
        
        if (!data.username || data.username.length < 2) {
            errors.username = '用户名至少需要2个字符';
        }
        
        if (data.phone && !/^1[3-9]\d{9}$/.test(data.phone)) {
            errors.phone = '请输入有效的手机号码';
        }
        
        // 只在新增模式下验证密码
        if (!data.id && (!data.password || data.password.length < 6)) {
            errors.password = '密码至少需要6个字符';
        }
        
        return errors;
    }

    // 显示表单错误
    function showFormErrors(errors) {
        // 清除所有错误消息
        $('.error-message').text('');
        
        // 显示新的错误消息
        Object.keys(errors).forEach(field => {
            $(`#${field}`).siblings('.error-message').text(errors[field]);
        });
        
        return Object.keys(errors).length === 0;
    }

    // 重置表单
    function resetForm() {
        $('#userForm')[0].reset();
        $('#userId').val('');
        $('.error-message').text('');
        $('#password').prop('required', true);
    }

    // 打开模态框
    function openModal(title = '新增用户') {
        resetForm();
        $('#modalTitle').text(title);
        $('#userFormModal').fadeIn(300);
    }

    // 关闭模态框
    function closeModal() {
        $('#userFormModal').fadeOut(300);
        resetForm();
    }

    // 事件绑定
    // 搜索按钮点击事件
    $('#searchBtn').on('click', function() {
        searchParams = {
            username: $('#searchInputName').val().trim(),
            phone: $('#searchInputPhone').val().trim()
        };
        currentPage = 1;
        fetchUserList();
    });

    // 重置按钮点击事件
    $('#resetBtn').on('click', function() {
        $('#searchInputName').val('');
        $('#searchInputPhone').val('');
        searchParams = {
            username: '',
            phone: ''
        };
        currentPage = 1;
        fetchUserList();
    });

    // 新增用户按钮点击事件
    $('#addUserBtn').on('click', function() {
        openModal('新增用户');
        $('#password').prop('required', true);
    });

    // 关闭模态框
    $('.close, #cancelUser').on('click', closeModal);

    // 提交用户表单
    $('#submitUser').on('click', function() {
        const userId = $('#userId').val();
        const userData = {
            username: $('#username').val().trim(),
            phone: $('#phone').val().trim(),
            role: parseInt($('#role').val()) || 0,
            status: parseInt($('#status').val()) || 1
        };

        // 如果是编辑模式
        if (userId) {
            userData.id = userId;
            const password = $('#password').val();
            // 只有当密码不为空且不是星号时，才添加密码字段
            if (password && password !== '********' && password.trim() !== '') {
                userData.password = password;
            }
            // 如果是编辑模���，不需要验证密码
            const errors = validateForm({...userData, id: userId});
            if (!showFormErrors(errors)) {
                return;
            }
        } else {
            // 新增模式，密码是必需的
            const password = $('#password').val().trim();
            if (!password) {
                showFormErrors({ password: '密码不能为空' });
                return;
            }
            userData.password = password;
            // 新增模式需要验证所有字段，包括密码
            const errors = validateForm(userData);
            if (!showFormErrors(errors)) {
                return;
            }
        }

        console.log('提交的用户数据:', userData); // 添加日志

        const url = userId ? apiUrl : `${apiUrl}add`;
        const method = userId ? 'PUT' : 'POST';

        $.ajax({
            url: url,
            method: method,
            headers: {
                'token': token,
                'Content-Type': 'application/json'
            },
            contentType: 'application/json',
            data: JSON.stringify(userData),
            success: function(response) {
                if (response.code === 200) {
                    toastr.success(userId ? '用户更新成功' : '用户添加成功');
                    closeModal();
                    fetchUserList();
                } else {
                    toastr.error(response.msg || (userId ? '用户更新失败' : '用户添加失败'));
                }
            },
            error: function(xhr, status, error) {
                console.error('提交失败:', error);
                toastr.error('服务器错误，请稍后重试');
            }
        });
    });

    // 编辑用户
    $(document).on('click', '.editBtn', function() {
        const userId = $(this).data('id');
        // 先清空表单
        resetForm();
        
        $.ajax({
            url: `${apiUrl}${userId}`,
            method: 'GET',
            headers: {
                'token': token
            },
            success: function(response) {
                if (response.code === 200) {
                    const user = response.data;
                    // 回显用户数据
                    $('#userId').val(user.id);
                    $('#username').val(user.username);
                    $('#phone').val(user.phone || '');
                    $('#role').val(user.role || 0);
                    $('#status').val(user.status || 1);
                    // 密码显示为星号
                    $('#password').val('********');
                    $('#password').prop('required', false);
                    // 打开模态框
                    $('#modalTitle').text('编辑用户');
                    $('#userFormModal').fadeIn(300);
                } else {
                    toastr.error(response.msg || '获取用户信息失败');
                }
            },
            error: function() {
                toastr.error('服务器错误，请稍后重试');
            }
        });
    });

    // 删除用户
    $(document).on('click', '.deleteBtn', function() {
        const userId = $(this).data('id');
        if (confirm('确定要删除该用户吗？此操作不可恢复！')) {
            $.ajax({
                url: `${apiUrl}${userId}`,
                method: 'DELETE',
                headers: {
                    'token': token
                },
                success: function(response) {
                    if (response.code === 200) {
                        toastr.success('用户删除成功');
                        fetchUserList();
                    } else {
                        toastr.error(response.msg || '用户删除失败');
                    }
                },
                error: function() {
                    toastr.error('服务器错误，请稍后重试');
                }
            });
        }
    });

    // 启用/禁用用户
    $(document).on('click', '.statusBtn', function() {
        const userId = $(this).data('id');
        const currentStatus = $(this).data('status');
        const newStatus = currentStatus === 1 ? 0 : 1;
        const statusText = newStatus === 1 ? '启用' : '禁用';

        if (confirm(`确定要${statusText}该用户吗？`)) {
            $.ajax({
                url: `${apiUrl}status/${newStatus}/${userId}`,
                method: 'PUT',
                headers: {
                    'token': token
                },
                success: function(response) {
                    if (response.code === 200) {
                        toastr.success(`用户${statusText}成功`);
                        fetchUserList();
                    } else {
                        toastr.error(response.msg || `用户${statusText}失败`);
                    }
                },
                error: function() {
                    toastr.error('服务器错误，请稍后重试');
                }
            });
        }
    });

    // 分页事件
    $('#prevPage').on('click', function() {
        if (currentPage > 1) {
            currentPage--;
            fetchUserList();
        }
    });

    $('#nextPage').on('click', function() {
        if (currentPage < totalPages) {
            currentPage++;
            fetchUserList();
        }
    });

    // 退出登录
    $('#logoutBtn').on('click', function() {
        if (confirm('确定要退出登录吗？')) {
            $.ajax({
                url: `${apiUrl}logout`,
                method: 'DELETE',
                headers: {
                    'token': token
                },
                success: function(response) {
                    if (response.code === 200) {
                        localStorage.removeItem('token');
                        window.location.href = 'login.html';
                    } else {
                        toastr.error(response.msg || '退出登录失败');
                    }
                },
                error: function() {
                    toastr.error('服务器错误，请稍后重试');
                }
            });
        }
    });

    // 初始化加载
    fetchUserList();
});
